<!--    系统配置 - 用户添加-拟投资项目   jh -->
<template>
    <div>
        <div class="box-style">
            <!--母基金不显示搜索框-->
         <el-row  v-if="type!=='3' && type!=='8'">
             <el-col :span="4">
                 <el-select v-model="industryChecked" :placeholder="placeholder"
                            @change="addToArr(industryChecked,industryListChecked,industryListAll)">
                     <el-option
                         label="全部"
                         value="null">
                     </el-option>
                     <el-option
                         v-for="item in industryListAll"
                         :label="item.name"
                         :key="item.id"
                         :value="item.id">
                     </el-option>
                 </el-select>
             </el-col>
             <el-col :span="20" class="tagStyle">
                 <el-tag
                     class="tagStyle-tag"
                     @close="handleCloseTag(tag,industryListChecked,type,callback)"
                     v-for="tag in industryListChecked"
                     :key="tag.id"
                     closable
                     type="">
                     {{tag.name}}
                 </el-tag>
             </el-col>
         </el-row>
          <el-row class="littleTitle">
            <el-col :span="4">
                <div class="ca-title"><h3>选择{{title}}</h3></div>
            </el-col>
              <!--<el-col :span="20">-->
                  <!--<el-checkbox  v-model="checkAll" @change="handChekedAll">全选/全不选</el-checkbox>-->
              <!--</el-col>-->
        </el-row>
            <el-table
                class="ca-table"
                ref="preInvestmentProjectTable"
                :data="filterData"
                border
                @select="handleSelectionChange"
                @select-all="handleSelectionChange"
                style="width: 100%"
                >
                <el-table-column
                    type="selection"
                    >
                </el-table-column>
                <el-table-column
                    label="序号"
                    type="index"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop="name"
                    :label="header">
                    <template slot-scope="scope" >
                        <div >{{ scope.row.name }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="industryIdShow"
                    :label="header2"
                    v-if="type!=='3' && type!=='8'"
                    >
                    <template slot-scope="scope" >
                        <div >{{ scope.row.industryIdShow? scope.row.industryIdShow.substring(0,scope.row.industryIdShow.length-1):''}}</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import mined from './mixin';
    export default {
        mixins: [mined],
        props: {
            //数据权限
            getDataAuth: {
                type: Function,
                default: function () {}
            },
            preInvestmentProjectTabData: { //数据权限
                type: Array,
                default() {
                    return [];
                }
            },
            id: {//用户id
                type: String,
                default() {
                    return '';
                }
            },
            roleId: { //角色id
                type: String,
                default() {
                    return '';
                }
            },
            type: { //数据类型
                type: String,
                default() {
                    return '';
                }
            },
            placeholder: {//用户id
                type: String,
                default() {
                    return '';
                }
            },
            header: {//表格第一栏显示名称
                type: String,
                default() {
                    return '';
                }
            },
            header2: {//表格第二栏显示名称
                type: String,
                default() {
                    return '';
                }
            },
            title: {//用户id
                type: String,
                default() {
                    return '';
                }
            },
            industryListAll: {//用户id
                type: Array,
                default() {
                    return [];
                }
            },
        },
        data() {
            return {
                multipleSelection: [],//表格选中的
                checkAll: false,//是否全部选中表格中的数据
                industryChecked: '',
                industryListChecked: [],
                //industryListAll: this.$store.state.user.dictionaryMap.industry, //全部的角色---假数据
            }
        },
        computed: {
            filterData: {
                get: function () {
//                    if (this.industryChecked === '') {
//                        return [...this.preInvestmentProjectTabData]
//                    } else
                        if (this.industryListChecked.length === 0) {
                        return [...this.preInvestmentProjectTabData]
                    } else {
                        return this.fiterDataFun()
                    }
                },
                set: function () {
                }
            }
        },
        watch: {
            industryChecked: function (val) {
                if (val === 'null') {
                    this.industryListChecked = [...this.industryListAll]
                }
            },
            filterData: function (val) {
                this.toggleSelection(val)
            },
        },
        mounted() {
            this.industryChecked = ''
            this.toggleSelection(this.preInvestmentProjectTabData)
        },
        updated() {
            this.industryChecked = ''
            //console.log(this.preEstablishingFundsTabData)
            this.toggleSelection(this.preInvestmentProjectTabData)
        },
        methods: {
            //过滤数据
            fiterDataFun() {
                let arr = []
                this.industryListChecked.map((item)=> {
                    this.preInvestmentProjectTabData.map((some)=> {
                        some.industryIdArr.map((sub)=>{
                            if (item.id === sub) {
                                arr.push(some)
                            }
                        })
                    })
                })
                return arr
            },
            //删除tag的回调函数
            callback() {
                if (this.industryListChecked.length !== 0) {
                    this.industryChecked = this.industryListChecked[this.industryListChecked.length - 1].id
                    this.filterData = []
                    this.filterData = this.fiterDataFun()
                }
            },
            //回显
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.preInvestmentProjectTable.toggleRowSelection(row,row.checked);
                    });
                } else {
                    this.$refs.preInvestmentProjectTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                //清空数组
                this.multipleSelection = []
                //val 选中的数组
                val.map((item)=>{
                    this.multipleSelection.push(item.id)
                })
                this.editDataAuth(this.id,this.roleId,this.type,this.multipleSelection,this.getDataAuth)
            },
        },
        components: {

        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.box-style{
    padding-left:20px;
    padding-top:20px;
}
//tag的样式
.tagStyle{
    line-height: 45px;
    .tagStyle-tag{
        margin-left:5px;
    }
}
.littleTitle{
    margin:10px 0;
}
//表格
table{
   tr td:nth-child(3){
       padding:0;
   }
}
.red{
    background: red;
}

</style>
